<template>
    <view class="flex-row align-center justify-around margin-tb-20 w100">
        <button class="cu-btn radius line-blue shadow" :data-type="Up" :disabled="page == 1"  @click="handleCurrentChange">上一页</button>
        <view class="text-gray71">{{page}} / {{totalPage}}</view>
        <button class="cu-btn radius line-cyan shadow" :data-type="Down"  :disabled="page == totalPage"  @click="handleCurrentChange">下一页</button>
    </view>
</template>
<script setup lang="ts">
import {computed} from 'vue'
import {Up, Down} from '@/utils/keyWord'


const props = defineProps({
  total: {
    required: true,
    type: Number,
    default: 0,
  },
  page: {
    type: Number,
    default: 1,
  },
  limit: {
    type: Number,
    default: 10,
  },
})

const emit = defineEmits(["pagination",  "update:page", "update:limit"]);

// 计算出共有多少页
const totalPage = computed(() =>{
    return (Math.floor (props.total / props.limit)) + (props.total % props.limit > 0 ? 1 : 0)
})

function handleCurrentChange(event: any){
  let operateType = event.currentTarget.dataset.type
  let increase = operateType === Up ? -1 : operateType === Down ? + 1 : 0;
  if(increase !== 0) {
      let currentPage = props.page + increase
      emit("update:page", currentPage)
      emit("update:limit", props.limit)
      emit("pagination");
  }
}
</script>